<template>
  <div class="my_vip" v-if="myMsg">
    <van-sticky>
      <van-nav-bar title="会员中心" left-arrow @click-left="back" />
    </van-sticky>
    <div class="content">
      <div class="card">
        <div class="user flex">
          <div class="head">
            <img :src="myMsg.avatarFile.uriPath?myMsg.avatarFile.uriPath:'../../../assets/img/my/touxaing-moren.png'" class="picimg" alt="">
            <!-- <img v-show="!user.uriPath" src="../../../assets/img/my/touxaing-moren.png" class="picimg" alt=""> -->
          </div>

          <div class="infor">
            <p class="name">{{myMsg.nickName}}</p>
            <p class="time" v-if="user.vipDate">{{user.vipDate}}到期</p>
            <p class="time" v-else>您还不是金卡VIP</p>
          </div>
        </div>
        <h4 class="type">{{user.name}}</h4>
        <p class="tip">{{user.description}}</p>
        <!-- <p class="tip">金卡专属特权+会员专属权益</p> -->
      </div>
    </div>

    <div class="equity">
      <h4 class="title">———— 会员权益 ————</h4>
      <div class="row-between-center">
        <div class="item">
          <div class="icon_1"></div>
          <p class="text">会员特权</p>
        </div>
        <div class="item">
          <div class="icon_2"></div>
          <p class="text">优惠活动</p>
        </div>
        <div class="item">
          <div class="icon_3"></div>
          <p class="text">专属服务</p>
        </div>
        <div class="item">
          <div class="icon_4"></div>
          <p class="text">专业机构</p>
        </div>
      </div>
    </div>

<!--    <div class="tips">
      <h4>会员权益：</h4>
      <p v-html="user.description" v-if="user.vipDate"></p>
      <div v-else>
         <p v-html="user.description"></p>
        <p>1.会员购买服务时，均享{{user.discount/10}}折优惠</p>
        <p>2.会员购买服务，有专属客服在1小时内提供帮助</p>
        <p>3.专享会员定向服务</p>
      </div>
    </div> -->
    <!-- <router-link @click.native="setInfor" tag="div" to="/pay/vip" class="btn">¥499/年 立即开通</router-link> -->
    <div @click="setInfor" v-if="myMsg.vipState==0" class="btn">¥{{user.price}}/年 立即开通</div>
  </div>
</template>

<script>
import api from 'api/api'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      chosenAddressId: '1',
      user: '',
      myMsg: {
        avatarFile: {
          uriPath: ''
        }
      },
    }
  },
  created () {
    this.getMe()
  },

  methods: {
    ...mapMutations(['UPDATA_ORDERINFOR']),
    getMe () {
      api.myIndex().then(res => {
        this.myMsg = res.data
        this.getData()
      })
    },
    getData () {
      if (this.myMsg.vipState == 0) {
        api.memberInfo().then(res => {
          this.user = res.data
          console.log('huiy1', this.user)
        })
      }
      else {
        api.memberCenter().then(res => {
          this.user = res.data
          console.log('huiy2', this.user)
        })
      }
    },
    setInfor () {
      console.log(11)
      // return
      var type = this.$route.params.type
      api.orderPlace({
        data: {
          id: this.user.id,
          orderType: 'MEMBER',
          addressId: '',
          description: ''
        }
      }).then(res => {
        console.log('vippp', res.data)
        if (res.code == 200) {
          this.UPDATA_ORDERINFOR(res.data)
          this.$router.push('/pay/' + res.data.orderNo)
          localStorage.setItem('payurl', window.location.href)
        }

      })
    },
    back () {
      window.history.go(-1)
    }
  }
}
</script>

<style lang="scss">
.my_vip {
  min-height: 100vh;
  // background-color: #f5f5f5;
  text-align: left;
  .content {
    padding: 0.3rem;
  }
  .card {
    width: 6.9rem;
    height: 2.91rem;
    background-image: url("../../../assets/img/my/huiyuan.png");
    background-size: 100% 100%;
    padding: 0.45rem;
    .user {
      .head {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        // border: 1px solid #fff;
        margin-right: 0.09rem;
        position: relative;
        .picimg {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          position: absolute;
          top: 0;
        }
      }
      .infor {
        color: #a27332;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        .name {
          font-size: 0.3rem;
          // margin-left: -1.45rem;
        }
        .time {
          font-size: 0.22rem;
        }
      }
    }
    .type {
      background: linear-gradient(
        180deg,
        rgba(206, 151, 74, 1) 0%,
        rgba(136, 94, 36, 1) 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 0.36rem;
      margin-top: 0.4rem;
    }
    .tip {
      font-size: 0.22rem;
    }
  }
  .equity {
    padding: 0.65rem;
    .title {
      color: #ddb776;
      font-size: 0.3rem;
      text-align: center;
      margin-bottom: 0.57rem;
    }
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .icon_1 {
      width: 0.49rem;
      height: 0.4rem;
      background-image: url("../../../assets/img/my/biaoshi.png");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
    .icon_2 {
      width: 0.49rem;
      height: 0.4rem;
      background-image: url("../../../assets/img/my/zhekou.png");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
    .icon_3 {
      width: 0.49rem;
      height: 0.4rem;
      background-image: url("../../../assets/img/my/kefu.png");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
    .icon_4 {
      width: 0.49rem;
      height: 0.4rem;
      background-image: url("../../../assets/img/my/fuwu.png");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
    .text {
      font-size: 0.24rem;
      margin-top: 0.1rem;
    }
  }
  .tips {
    padding: 0 0.3rem;
    h4 {
      font-size: 0.3rem;
      font-weight: 400;
    }
    p {
      margin-top: 0.3rem;
      font-size: 0.22rem;
    }
  }
  .btn {
    position: fixed;
    left: 0.3rem;
    bottom: 1.07rem;
    width: 6.9rem;
    height: 0.91rem;
    line-height: 0.91rem;
    text-align: center;
    background: linear-gradient(
      254deg,
      rgba(249, 226, 172, 1),
      rgba(221, 182, 117, 1)
    );
    border-radius: 0.45rem;
    margin: 0 auto;
    color: #ff344c;
    font-size: 0.36rem;
  }
  .mb_18 {
    margin-bottom: 0.18rem;
  }
  .mb_105 {
    margin-bottom: 1.05rem;
  }
}
</style>